/**
 * echarts构造函数
 * */
const echarts = require('echarts');
export const Echarts = function (msg) {
    this.dom = msg.dom;
    this.chartStyle = {
        tooltip: {
            formatter: msg.formatter,
            //触发类型：坐标轴触发
            trigger: msg.type === 'pie' ? 'item' :'axis',
            axisPointer: {
                type: 'cross',
            },
            backgroundColor: 'rgba(255,255,255,0.8)',//通过设置rgba调节背景颜色与透明度
            color: 'black',
            textStyle: {
                color: '#303030',
            },
            extraCssText: 'box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);'
        },
        title: {
            top: msg.type === 'pie' ? '40%' : '0%',
            left: msg.type === 'pie' ? 'center' : '6%',
            text: msg.title,
            textStyle: {
                fontSize: 30,
                fontFamily: 'Microsoft YaHei',
                color: '#BCF0FE'
            }
        },
        graphic : msg.graphic,
        color: msg.color,
        grid: {
            left: '10%',
            right: '10%',
            bottom: "10%",
            containLabel: true
        },
        legend: {
            show: msg.legend,
            orient: msg.type === 'pie' ? 'vertical' : 'horizontal',
            bottom: msg.type === 'pie' ? '0%' : '0%',
            left: msg.type === 'pie' ? '0%' : '25%',
            width: '100%',
            height: '35%',
            itemGap: 10,
            itemWidth: 15,
            itemHeight: 10,
            textStyle: {
                fontSize: 14,
                color: '#01DFF4'
            },
            data: msg.legendData,
        },
        xAxis: [
            {
                type: 'category',
                name: msg.xName,
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#2AAEF2",
                    }
                },
                splitLine: {
                    //去除网格线
                    show: false,
                    lineStyle: {
                        type: 'dashed',
                        color: '#BFBFBF'
                    }
                },
                boundaryGap: true,
                axisLabel: {
                    fontSize: 14,
                    color: '#01DFF4'
                },
                data: msg.xData,
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: msg.yname,
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#2AAEF2',
                    }
                },
                offset: 30,
                splitLine: {
                    //去除网格线
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        color: 'rgba(1, 223, 244, 0.55)'
                    }
                },
                axisLabel: {
                    inside: true,
                    fontSize: 14,
                    color: '#01DFF4'
                    // formatter: function (params) {
                    //     return params + '人'
                    // }
                },
                axisTick: {
                    show: false,
                },
            }
        ],
        series: []
    };
    let _self = this;
    if (Object.prototype.toString.call(msg.seriesData[0]).slice(8, -1) === "Array") {
        msg.seriesData.forEach(function (item, index) {
            let itemObj = {
                name: msg.legendData[index],
                type: msg.type,
                radius: msg.radius,
                center: msg.center,
                roseType: msg.roseType,
                label: {
                    normal: {
                        show: false,
                        position: msg.labelPosition,
                        formatter: msg.formatter,
                    },
                    emphasis: {
                        show: false
                    }
                },
                itemStyle: {
                    normal: {
                        color: msg.color[index],
                        borderColor: msg.color[index],
                        borderWidth: 5,
                        lineStyle: {
                            // 系列级个性化折线样式
                            width: 4,
                            type: 'solid',
                        }
                    },

                },
                // 线条样式
                // areaStyle: {
                //     normal: {
                //         color: '#458DFE'
                //     }
                // }
                lineStyle: {
                    normal: {
                        color: msg.color[index]
                    },
                },
                barWidth: 10,
                barGap: '250%',
                smooth: true,
                showSymbol: false,
                // hoverAnimation: false,
                data: item,
            }
            _self.chartStyle.series.push(itemObj)
        })
    } else {
        _self.chartStyle.series = [
            {
                name: msg.title,
                type: msg.type,
                radius: msg.radius,
                center: msg.center,
                roseType: msg.roseType,
                avoidLabelOverlap: false,
                label: {
                    show:msg.lineLabelFlag,
                    alignTo: 'labelLine',
                    formatter: '{name|{b}}{time| ({c})}',
                    minMargin: 5,
                    edgeDistance: 10,
                    lineHeight: 15,
                    color:'#BCF0FE',
                    rich: {
                        time: {
                            color: '#BCF0FE'
                        }
                    }
                },
                labelLine: {
                    show: msg.lineLabelFlag,
                    length: 10,
                    length2: 20,
                    maxSurfaceAngle: 180
                },
                emphasis: {
                    label: {
                        show: false,
                        fontSize: '40',
                        fontWeight: 'bold'
                    }
                },

                itemStyle: {
                    emphasis: {
                        show:false,
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    normal: {
                        color: msg.areaStyle[0],
                        borderWidth: 5,
                        borderColor: msg.backgroundColor,
                    },
                },
                barWidth: 24,
                smooth: true,
                showSymbol: false,
                hoverAnimation: true,
                data: msg.seriesData,
            },
        ]
    }
};

Echarts.prototype.renderDom = function () {
    let _self = this;
    _self.echart = echarts.init(_self.dom);
    let option = {
        title: this.chartStyle.title,
        color: this.chartStyle.color,
        legend: this.chartStyle.legend,
        tooltip: this.chartStyle.tooltip,
        grid: this.chartStyle.grid,
        xAxis: this.chartStyle.xAxis,
        yAxis: this.chartStyle.yAxis,
        series: this.chartStyle.series,
        graphic: this.chartStyle.graphic,
    };
    if (option && typeof option === "object") {
        _self.echart.setOption(option, true);
    }
    window.addEventListener('resize', function () {
        setTimeout(_self.echart.resize(), 100);
    })
}
Echarts.init = function (msg, responseData) {
    Object.assign(msg, responseData);
    let instance = new Echarts(msg);
    instance.renderDom()
    return instance
}
